<template>
  <div class="header">
    <div class="appheader">
      <img src="@/assets/images/logo.png" alt="" style="width: 80px;margin-left: 20px;">
      <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          router
      >
        <el-menu-item :index="v.url" v-for="v in useNenus" :key="v.url">
          <span>{{ v.name }}</span>
        </el-menu-item>

      </el-menu>
      <div class="header-item">
        <el-input
            v-model="input3"
            size="large"
            style="max-width: 600px"
            placeholder="Please input"
            class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search"/>
          </template>
        </el-input>
      </div>
      <div class="header-userinfo">
        <div class="popover">
          <el-badge :value="showMsgCount" :max="99" class="item">
            <el-popover placement="bottom" trigger="hover" title="消息列表">
              <template #reference>
                <el-icon color="#777575" class="no-inherit" :size="25" style="">
                  <Bell/>
                </el-icon>
              </template>
            </el-popover>
          </el-badge>
        </div>
        <div class="popover">
          <el-badge :value="showMsgCount" :max="99" class="item">
            <el-popover placement="bottom" trigger="hover" title="消息列表">
              <template #reference>
                <el-icon color="#777575" class="no-inherit" :size="25" style="">
                  <BellFilled/>
                </el-icon>
              </template>
            </el-popover>
          </el-badge>
        </div>
        <el-dropdown size="default">
                <span class="el-dropdown-link">
                  <img src="@/assets/images/head.png" alt="" style="">
                </span>
          <template #dropdown>
            <el-dropdown-menu>
              <span>士大夫</span>
              <el-dropdown-item>
                <el-icon>
                  <User/>
                </el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon>
                  <Setting/>
                </el-icon>
                密码修改
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon>
                  <SwitchButton/>
                </el-icon>
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, ref} from 'vue';
import {Search} from '@element-plus/icons-vue'
// import {Bell} from "@element-plus/icons-vue";
// import { useStore } from 'vuex';

const input3 = ref('')
// const store = useStore();

const useNenus = ref([
  {name: '首页', url: '/index'},
  {name: '分享', url: '/share'},
  {name: '问答', url: '/question'},
  {name: '笔记', url: '/note'}
])
// @select="handleSelect"

const showMsgCount = computed(() => {
  return 4;
})

</script>
<style scoped>
/* @import '@/assets/css/index.css'; */

/* 页面头部header */

.header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 1px 3px #ddd;
}

.appheader {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; */
  /* max-width: 1280px;
  min-width: 1000px; */
}

.el-container .el-header {
  padding: 0;
}

.header .el-menu--horizontal {
  border: 0;
  width: 530px;
  margin-left: 20px;
}

.header-item {
  width: 400px;
}

/* .header-item .input-with-select{
    border-radius: 20px;
} */

:deep(.appheader .input-with-select .el-input-group__append) {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
}

:deep(.appheader .input-with-select .el-input__wrapper) {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: 0 1px 0 var(--el-input-border-color) inset,
  0 -1px 0 0 var(--el-input-border-color) inset,
  1px 0 0 0 var(--el-input-border-color) inset;
}

.appheader .item {
//width: 30px; margin-top: 10px;
  margin-left: 20px;
  cursor: pointer;
}

.header-userinfo {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  margin-left: 30px;
  cursor: pointer;
//color: var(--el-color-primary); display: flex;
  align-items: center;
}

.el-dropdown-link img{
  width: 40px; height:40px;border-radius: 3px;
}

</style>